/* Set the background image sources */
#newyork {
    background-image: url(../../_assets/img/newyork.jpg);
}

#buenosaires {
    background-image: url(../../_assets/img/buenosaires.jpg);
}

#paris {
    background-image: url(../../_assets/img/paris.jpg);
}

#capetown {
    background-image: url(../../_assets/img/capetown.jpg);
}

#seoul {
    background-image: url(../../_assets/img/seoul.jpg);
}

#sydney {
    background-image: url(../../_assets/img/sydney.jpg);
}

/* Background settings */
.demo-page {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Transparent footer */
.demo-page .ui-footer {
    background: none;
    border: none;
    bottom: 0;
}

/* The footer won't have a height because there are only two absolute positioned elements in it.
So we position the buttons from the bottom. */
.control.ui-btn-left, .trivia-btn.ui-btn-right {
    top: auto;
    bottom: 7px;
    margin: 0;
}

/* Custom styling for the trivia source */
small {
    font-size: .75em;
    color: #666;
}

/* Prevent text selection while swiping with mouse */
.demo-page .ui-header, .ui-title, .control .ui-btn, .trivia-btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
